<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV浏览器高保真原型预览</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #1a1a1a;
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        h1 {
            color: #ecf0f1;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2em;
        }
        
        .prototype-container {
            border: 2px solid #34495e;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            background: #2c3e50;
            max-width: 100%;
        }
        
        .prototype-container svg {
            display: block;
            width: 100%;
            height: auto;
            max-width: 1440px;
        }
        
        .description {
            color: #bdc3c7;
            text-align: center;
            margin-top: 20px;
            max-width: 800px;
            line-height: 1.6;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
            max-width: 1000px;
        }
        
        .feature-card {
            background: #34495e;
            padding: 20px;
            border-radius: 12px;
            color: #ecf0f1;
        }
        
        .feature-title {
            color: #3498db;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>🌐 智能TV浏览器 - 高保真原型</h1>
    
    <div class="prototype-container">
        <object data="tv_browser_prototype.svg" type="image/svg+xml" width="1440" height="810">
            您的浏览器不支持SVG显示
        </object>
    </div>
    
    <div class="description">
        <p><strong>设计说明：</strong>这是一个专为Android TV设计的浏览器界面原型，具有简洁明了的布局和易于遥控器操作的大按钮设计。</p>
    </div>
    
    <div class="features">
        <div class="feature-card">
            <div class="feature-title">📑 书签管理</div>
            <p>中间区域展示的是用户收藏的书签网站，每个卡片右上角都有金色书签标识，支持快速访问常用网站。</p>
        </div>
        
        <div class="feature-card">
            <div class="feature-title">🔍 智能搜索</div>
            <p>顶部搜索栏支持直接输入网址或搜索关键词，配备搜索按钮和前进后退导航按钮。</p>
        </div>
        
        <div class="feature-card">
            <div class="feature-title">📱 分类导航</div>
            <p>支持按类型浏览书签：搜索引擎、视频网站、常用网站等，让用户快速找到需要的网站。</p>
        </div>
        
        <div class="feature-card">
            <div class="feature-title">🎮 遥控器友好</div>
            <p>所有按钮和卡片都采用大尺寸设计，适合使用TV遥控器操作，底部功能栏提供核心功能快捷访问。</p>
        </div>
    </div>
</body>
</html> 